 <template> 
 <div v-if="showHeader"> 
  <div   class="rrrr0"   v-if="show"  @click="handleShow">
  <img :src="m27" alt="" srcset="">
  <div class="mxingTreeBox">
    <div class="mxingTree">模</div>
  <div class="mxingTree mxingTreeMT">型</div>
  <div class="mxingTree">树</div>
  </div>
 </div>
 </div>
 <div class="drawer-more-wrapper">
  <transition v-if="showHeader" name="slide" @enter="enter" @leave="leave" :key="width2">
    <div v-if="!show" class="boxSiled" :style="`width:${width1}`">
      <div  class="rrrr" @click="handleShow">
        <img :src="m27" alt="" srcset="">
            <div class="mxingTreeBox">
              <div class="mxingTree">模</div>
              <div class="mxingTree mxingTreeMT">型</div>
              <div class="mxingTree">树</div>
            </div>
      </div>
       <div class="wh14">
         <TreesSetting @handleDefaultExpandAll="handleDefaultExpandAll"/> 
         <SearchModule/>
         <Trees :key='width2' :defaultExpandAll="defaultExpandAll"/>
        </div>
    </div>
    
  </transition>
   
  <moduleConetnt  @handleWindow="handleWindow"/>
 </div> 
</template>
 
<script setup>
import { ref ,watch} from 'vue'
import m27 from "../../assets/img/m27.png" 
import moduleConetnt from '@/components/modelPage/moduleConetnt.vue';
 import Trees from '@/components/modelPage/Tree.vue';
 import TreesSetting from '@/components/modelPage/TreesSetting.vue';
 import SearchModule from '@/components/modelPage/SearchModule.vue';
 import {useCommomStore} from "@/pinia/store/commom.pinia"
  import {storeToRefs} from 'pinia'; 

   const storeCommomStore = useCommomStore();
const {showHeader} =  storeToRefs(storeCommomStore)
 const emits =defineEmits(['handlePrentWindow']);
 const handleWindow =()=>{
  emits('handlePrentWindow') 
 }
  
  const defaultExpandAll=ref(false);
   
 
const show = ref(false)
const width1 = ref('238px') 
const width2 = ref(0) 
 
 const handleShow=()=>{
  show.value =!show.value
  // width.value = !show.value? '238px' : '0px'
   
 } 
  watch(()=>show.value,(val)=>{
  console.log(show.value)
   width1.value = val? '0px' : '238px'
   width2.value++;
   console.log('--------------------------------',width1.value);
 })
const handleDefaultExpandAll =(index)=>{
  if(index==1){
   width2.value++;
   defaultExpandAll.value=true
  }else if(index==2){
   width2.value++;
   defaultExpandAll.value=false
  }
}
function enter(el, done) {
  // 进入的动画
  el.offsetHeight // 强制重绘
  el.style.transform = 'translateX(0)'
 
  // 可以使用Velocity.js或者其他动画库来实现更复杂的动画
}
 
function leave(el, done) {
  // 离开的动画
  el.offsetHeight // 强制重绘
  el.style.transform = 'translateX(-100%)'
 
  // 可以使用Velocity.js或者其他动画库来实现更复杂的动画
}
</script>
 
<style lang="scss" scope>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s;
  transform: translateX(100%);
}
.slide-enter-from, .slide-leave-to {
  transform: translateX(-100%);
}
.drawer-more-wrapper{
  display: flex;
  width: 100%;
}
.boxSiled { 
  padding: 10px;
  
  height:calc(100vh - 198px);
  background: rgba(252, 252, 252, 1);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06);
  position: relative;
}
.rrrr0{
   width: 36px;
  height: 134px;
  position: absolute;
    left: 0px;
    z-index: 1; 
    top: 50%;
    cursor: pointer; 
 
   img{
    width: 100%;
    height: 100%;
   }
}

.mxingTreeBox{
  margin-top: -91px;
    margin-left: 10px;
}
.mxingTreeMT{
  margin: 5px 0;
}
.rrrr{
   width: 36px;
  height: 134px;
  position: absolute;
    right: -31px;
    z-index: 3; 
    top: 41%;
    cursor: pointer;  
   img{
    width: 100%;
    height: 100%;
   }

}
// .wh14{
//   width: 100%;
//   height: 14px;

// }
</style>